<template>
	<section class="promotionLinkBox" >
		<el-form ref="customer" label-position="top" :inline="true" class="demo-form-inline">
            <el-row>
                <el-col :span="4">
                	<el-form-item label="渠道:">
                        <el-select v-model="filter.channel">
						    <el-option
						      v-for="item in channelOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					</el-form-item>
                </el-col>
                <el-col :span="4">
                	<el-form-item label="注册状态:">
                        <el-select v-model="filter.RegistrationStatus">
						    <el-option
						      v-for="item in RSoptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					</el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="手机号码:">
                        <el-input placeholder="手机号码" v-model="filter.Tel" size="small"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                	<el-form-item label="查询时间:">
	                    <el-date-picker
						    v-model="datePicker"
						    type="daterange"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
                </el-col>
                <el-col :span="4">
                	<el-form-item label="每页显示:">
                        <el-select v-model="filter.pages">
						    <el-option
						      v-for="item in pagesOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					</el-form-item>
                </el-col>
           </el-row>
           <el-row>
           		<el-col :span="12" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
                        </el-button>
                        <el-button size="small" type="primary" @click="promotionLink" icon="el-icon-search">查询</el-button>
                        <el-button size="small" type="primary" @click="exportData">导出Excel</el-button>
                    </el-form-item>
                </el-col>
           </el-row>
           
           <el-row class="margin-table">
                <el-table :data="tableList" v-model="tableList" border style="width: 100%;">
	                <el-table-column prop="num"  label="序号" align='center'></el-table-column>
	                <el-table-column prop="channel"  label="渠道" align='center'></el-table-column>
	                <el-table-column prop="shopName" label="商家名称" align='center'></el-table-column>
	                <el-table-column prop="phoneNumber" label="手机号" align='center' ></el-table-column>
	                <el-table-column prop="link" label="来源链接" align='center' ></el-table-column>
	                <el-table-column prop="infernal" label="地域" align='center' ></el-table-column>
	                <el-table-column prop="lastTimeString" label="时间" align='center' ></el-table-column>
	                <el-table-column prop="serviceState" label="服务状态" align='center' ></el-table-column>
	                <el-table-column prop="trackID" label="TrackID" align='center' ></el-table-column>
	                <el-table-column prop="keyWord" label="关键词" align='center' ></el-table-column>
                </el-table>
            </el-row>
		    <el-row class="paging" style='margin-top: 40px;'>
		        <el-pagination
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount">
		        </el-pagination> 
      		</el-row>
        </el-form>
	</section>
</template>

<script>
	import Vue from 'vue'
	import { Row, Col, Form, FormItem,Input,Button,Select,Option,DatePicker,Table,TableColumn,Pagination} from 'element-ui';
	import {channelOptions,RSOptions,pagesOptions} from '~/assets/js/option_dataCharts';
	import { mapGetters, mapActions, mapMutations } from 'vuex';
	import { getDate, setToken, getCookie} from '../../utils/auth';
	import { PROMOTIONAL_TOTALCOUNT, PROMOTIONAL_CURRENTPAGE, PROMOTIONAL_PAGESIZE } from '../../store/mutation-types/promotionLink/index.js'

	Vue.use(Row);
	Vue.use(Col);
	Vue.use(Form);
	Vue.use(FormItem);
	Vue.use(Input);
	Vue.use(Button);
	Vue.use(Select);
	Vue.use(Option);
	Vue.use(DatePicker);
	Vue.use(Table);
	Vue.use(TableColumn);
	Vue.use(Pagination);
	
	export default {
		components: {
			
		},
		head(){
            return {
                title: this.title,
            }
        },
		data() {
			return {
				tabName: '推广日志',
				title: "推广日志",
				filter:{
	      			channel:'1',//渠道
	      			RegistrationStatus:'1',//注册状态
	      			Tel:'',//手机号码
					pages:'1', //每页显示
	      			pageSize: 50, // 每页条数
					pageNum: 1
      		   },
				channelOptions:channelOptions,
				RSoptions:RSOptions,
				datePicker:'',
				pagesOptions:pagesOptions,
				tableList:[],
				
			}
		},


		computed: {
			...mapGetters({
				'pageTabsList': 'getPageTabsList',
                'currentPage': 'currentPageShopManage',
                'totalCount': 'totalCountShopManage',
                'pageSize': 'pageSizeShopManage',
			})
		},
		methods: {
			
			handleCurrentChange(val) {
        		this.$store.commit('PROMOTIONAL_CURRENTPAGE',{currentPage:val});
        		this.getPromotionLink()
	        },
	        handleSizeChange(val) {
	        	this.$store.commit('PROMOTIONAL_PAGESIZE',{pageSize:val})
				this.getPromotionLink();
	        },
	        empty(){
				
			},
			promotionLink(){
				this.getPromotionLink();
			},
			getPromotionLink(){
				
			},
			exportData(){
				
			}
		},
		created() {
			//pageTab
			if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss">
	.promotionLinkBox{
		margin-top: 20px;
		a, a:hover, a:focus, a:visited{
			color: #20a0ff;
	    	-webkit-text-decoration-line: underline;
	  		text-decoration-line: underline; 
		}
		.margin-table {
			margin-top: 20px;
			.el-icon-close{padding-right: 20px;}
			.input_text .el-input__inner{padding-right: 25px;}
		}
		.module-opera-top{
			.el-form-item{margin-bottom: 50px !important;}
		}
		.el-form--inline .el-form-item__label{
			float: left !important;
		}
	}
</style>